<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>

        <!-- 新 Bootstrap4 核心 CSS 文件 https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css-->
        <link rel="stylesheet" href="/static/bootstrap-4.5.0-dist/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <!-- 移动设备优先 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!--Bootstrap4 表单验证插件-->
        <script src="/static/js/bootstrapValidator.min.js"></script>
        <link href="/static/css/bootstrapValidator.min.css" rel="stylesheet"/>
        <!--通用方法-->
        <script src="/static/js/baseJs/base.js"></script>
        <!--MD5-->
        <script src="/static/js/baseJs/MD5.js"></script>
        <style type="text/css">
            /*背景*/
            body {
                background-image: url('/static/images/ToolIoc/tt0.top-704510.gif');
                background-repeat: repeat-x;
                background-size: 400px 900px;
            }

            .middle {
                margin-top: 110px;
                margin-bottom: 110px;
                padding: 100px 50px 50px 50px;
                background-color: white;
                border-radius: 15px;
                box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1);

            }

            .login {
                margin-left: 20px;
            }

            .font2 {
                font-size: 0.6em;
            }

            .btn {
                border-radius: 28px;
            }

            .login .form-group .form-control-red {
                color: #495057 !important;
                background-color: #fff !important;
                border-color: #e99898 !important;
                outline: 0 !important;
                box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
            }

        </style>


    </head>
    <body>

        <div class="container">
            <div class="middle mx-auto h-60 w-60" style="padding: 50px;margin-bottom: 50px">
                <div class="row">
                    <div class="col col-9 col-md-6">
                        <a style="color: #007bff;text-decoration:none;line-height: 5px" href="/myPage/info">
                            <img height="20" width="20" src="/static/images/ToolIoc/叉.png">
                        </a>
                    </div>
                    <div class="col col-3 col-md-6">
                        <a style="color: #007bff;text-decoration:none;line-height: 5px" href="/myPage/login">
                            <span>登录</span>
                        </a>
                    </div>
                    <div class="col col-12 col-md-6 ">
                        <img id="logo" style="margin-left: 0" class="rounded img-fluid"
                             src="/static/images/ToolIoc/星速外卖logo.png" alt="星速外卖">
                    </div>
                    <div class="col col-12 col-md-6">
                        <div class="login">
                            <h5 class="font-weight-bold">欢迎注册星速外卖</h5>
                            <p class="font-weight-light font2">关于吃的我们很专业</p>
                            <!--登录-->
                            <form action="/userLogin/registerUserLogin" role="form" enctype="multipart/form-data"
                                  id="formRegister" type="post">
                                <!--用户名 只能输入字符-->
                                <div class="form-group has-success has-feedback">
                                    <label for="logAccount" class="sr-only">账号名:</label>
                                    <input type="text" name="logAccount" class="form-control" id="logAccount"
                                           style="border-radius: 5px;"
                                           placeholder="账号" required>
                                    <span id="username-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <!--密码-->
                                <div class="form-group">
                                    <label for="logPassWord" class="sr-only">密码:</label>
                                    <input type="password" name="logPassWord" class="form-control" id="logPassWord"
                                           style="border-radius: 5px;"
                                           placeholder="密码">
                                    <span id="logPassWord-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="sr-only">邮箱:</label>
                                    <input type="email" name="email" class="form-control" id="email"
                                           style="border-radius: 5px;"
                                           placeholder="email">
                                    <span id="email-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <!--验证码-->
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" placeholder="验证码" class="form-control" id="authCode"/>
                                        <button name="authCode" id="subCode" type="button"
                                                style="background-color: #17a2b8;border-radius: 3px;outline: none;border: 0;padding: 0 10px;">
                                            <span style="color: white" id="subCodeText"> 获取验证码</span>
                                        </button>
                                    </div>
                                    <span id="code-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <!--头像-->
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" placeholder="头像上传" class="form-control" id="headFileName"
                                               onclick="$('#file').click()" eadonly/>
                                        <span id="upload" class="btn btn-info input-group-addon"
                                              onclick="$('#file').click()" style="border-radius: 3px;">
			                            <i class="glyphicon glyphicon-cloud-upload"></i>
			                                上传
		                                </span>
                                    </div>
                                    <input type="file" name="headImg" class="form-control" id="file"
                                           style="display:none"/>
                                    <!--提示信息-->
                                    <span id="file-span" style="color: red;font-size: 9px">

                                    </span>
                                </div>
                                <div class="xuan custom-control custom-checkbox ">
                                    <input type="checkbox" class="custom-control-input " id="customCheck"
                                           name="example">
                                    <label id="boxText" class="custom-control-label font-weight-light small"
                                           for="customCheck">登录代表同意<a href="/myPage/info">条款、隐私政策</a></label>
                                </div>
                                <br>

                                <button type="button" id="register" class="btn btn-primary btn-block w-75 mx-auto">
                                    <span id="rotate" class="spinner-border-sm" role="status" aria-hidden="true"></span>
                                    注 册
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                /*多重动画方法*/
                function left_right() {
                    $("#logo").animate({'marginLeft': '+=200'}, 5000, function () {
                        $('#logo').prop('src', '/static/images/ToolIoc/星速外卖logo返回.png');
                    });
                    $("#logo").animate({'marginLeft': '-=200'}, 5000, function () {
                        $('#logo').prop('src', '/static/images/ToolIoc/星速外卖logo.png');
                        setTimeout(left_right, 1000);
                    });
                }

                /*调用*/
                left_right();
                /*上传文件*/
                $("#file").change(function () {
                    $("#headFileName").val($("#file")[0].files[0].name);
                });
                /*正则判断 失去焦点触发 登录 密码 邮箱*/
                var nameFlog;
                var logPassWordFlog;
                var emailFlog;
                var fileName;
                var codeFlog;
                var codeValue;
                /*用户名*/
                $('#logAccount').blur(function () {
                    nameFlog = judge($(this), $('#username-span'), '用户名只能为2-6位', /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,6}$/g)
                    if (nameFlog !== false) {
                        /**
                         * 查询登录名是否唯一
                         */
                        $.ajax({
                            type: "post",
                            url: '/userLogin/byLoginName',
                            data: 'logAccount=' + $(this).val(),
                            success: function (data) {
                                nameFlog = data;
                                //是true 的话证明有这个登录名 将进行提示错误
                                if (data) {
                                    judgeByLoginName($('#logAccount'), $('#username-span'), '您的账户名已注册', false);
                                }
                            }
                        })
                    }

                });

                /*密码*/
                $('#logPassWord').blur(function () {
                    logPassWordFlog = judge($(this), $('#logPassWord-span'), '密码格式错误 只能6-10位 字母开头', /^[a-zA-Z][a-zA-Z0-9_.'#><+]{5,10}$/g);
                });
                /*邮箱*/
                $('#email').blur(function () {
                    emailFlog = judge($(this), $('#email-span'), '邮箱格式错误', /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
                })
                /*文件后缀验证*/
                $('#upload').mouseout(function () {
                    fileName = judge($('#headFileName'), $('#file-span'), '上传只能为jpg png 等格式', /\.(png|jpg)$/g);
                })
                /*上传文件*/
                $('#headFileName').blur(function () {
                    fileName = judge($(this), $('#file-span'), '上传只能为jpg png 等格式', /\.(png|jpg)$/g)
                })
                /*验证码 验证*/
                $('#authCode').blur(function () {
                    codeFlog = judge($(this), $('#code-span'), '验证失败', /^\d{8}$/g);
                    console.log(codeValue);
                    if (codeFlog) {
                        /**
                         * 验证验证码是否真正确
                         */
                        if (codeValue != $(this).val()) {
                            judgeByLoginName($(this), $('#code-span'), '验证失败', false);
                        }
                    }
                });
                /*点击获取验证码*/
                $('#subCode').click(function () {
                    let $this = $(this);
                    nameFlog = judge($('#logAccount'), $('#username-span'), '用户名只能为2-6位', /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,6}$/g);
                    if (nameFlog) {
                        emailFlog = judge($('#email'), $('#email-span'), '邮箱格式错误', /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
                        if (emailFlog) {
                            //禁止按钮
                            $this.attr('disabled', true);
                            //改变颜色
                            $this.css("background-color", "#797979")
                            /*倒计时*/
                            var count = 60;
                            var countdown = setInterval(CountDown, 1000);

                            function CountDown() {
                                $("#subCodeText").text(count + " 秒后可重发");
                                if (count == 0) {
                                    $("#subCodeText").text('获取验证码');
                                    $this.removeAttr("disabled");
                                    $this.css("background-color", "#17a2b8");
                                    clearInterval(countdown);
                                }
                                count--;
                            }

                            /**
                             * 验证验证码是否真正确
                             */
                            $.ajax({
                                type: "post",
                                url: '/userLogin/byCode',
                                data: {
                                    email: $('#email').val(),//邮箱
                                    userName: $('#logAccount').val()//用户名
                                },
                                success: function (res) {
                                    codeValue = res.data.codeTo;
                                    console.log(res);
                                    console.log(res.data.codeTo);
                                },
                                error: function (e) {
                                    window = "/index/404"
                                }
                            })
                        }
                    }
                });
                /*提交注册*/
                $('#register').click(function () {
                    var check = $('#customCheck').prop("checked");
                    console.log(nameFlog)
                    if (nameFlog == null || nameFlog === false) {
                        nameFlog = judge($('#logAccount'), $('#username-span'), '用户名为空', /^[\u4e00-\u9fa5_a-zA-Z0-9-]{1,6}$/g)
                    } else if (logPassWordFlog == null || logPassWordFlog === false) {
                        logPassWordFlog = judge($('#logPassWord'), $('#logPassWord-span'), '密码为空', /^[a-zA-Z][a-zA-Z0-9_.'#><+]{5,10}$/g);
                    } else if (emailFlog == null || emailFlog === false) {
                        emailFlog = judge($('#email'), $('#email-span'), '邮箱为空', /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g);
                    } else if (fileName == null || fileName === false) {
                        fileName = judge($('#headFileName'), $('#file-span'), '上传头像文件为空', /\.(png|jpg)$/g);
                    } else if (!check) {
                        $('#boxText').css("color", "red");
                    } else if (codeFlog == null || codeFlog == false) {
                        codeFlog = judge($('#authCode'), $('#code-span'), '验证失败', /^\d{8}$/g);
                    } else if (nameFlog && logPassWordFlog && emailFlog && fileName) {
                        var fromRegister = document.getElementById("formRegister");
                        var fd = new FormData(fromRegister);
                        console.log(fd)
                        console.log(fd.values());
                        $('#rotate').addClass('spinner-border');
                        setTimeout(function () {
                            /*全部都为true时 进行提交*/
                            $.ajax({
                                url: '/userLogin/registerUserLogin',
                                type: "post",
                                dataType: "json",
                                data: fd,
                                cache: false,
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    //查看响应是否成功 true成功
                                    if (data.success) {
                                        $('#rotate').removeClass('spinner-border');
                                        setTimeout(function () {
                                            $.toast();
                                        },1000);
                                        location = '/myPage/login';
                                    } else {
                                        $('#rotate').removeClass('spinner-border');
                                    }
                                },
                                error: function (data) {
                                    $('#rotate').removeClass('spinner-border');
                                    alert("网络错误")
                                }
                            })
                            //内容2秒后执行
                        }, 2000);
                    }
                })
            });
        </script>
    </body>
</html>